<template>
    <div id="main-box">

    <div class="title">
    <van-nav-bar
            title="限时大促"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
    />
    </div>

    <div class="banner-goods">
        <van-grid :border="false" :column-num="3">
            <template v-for="(item,i) in goodsInfo.slice(0,3)">
            <van-grid-item :key="i">
                <div style="height:230px">
                    <div style="height:120px">
                <van-image :src="imgsrc+item.img" style="height:109px;width:109px"  />
                    </div>
                <div class="van-multi-ellipsis--l2" style="font-size:12px;margin-bottom:10px">
               {{item.title}}
                </div>
            <div style="height:30px;margin-left:25px">
                <label>￥{{item.price}}</label>
                </div>
                        <div style="height:20px;margin-left:25px">
                <van-button round type="danger" size="mini" @click="buy(item.id,1)">立即抢</van-button>
                        </div>
                </div>
            </van-grid-item>
            </template>
        </van-grid>

    </div>

        <div class="times">
            <van-tabs type="card">
                <van-tab title="大促活动火热进行中...">
                    <template v-for="(item,i) in goodsInfo.slice(3,20)">
                    <div class="goodsdetail" :key="i">
                        <van-card
                                :price="item.price.toFixed(2)"
                                :title="item.title"
                                :thumb="imgsrc+item.img"
                        >
                            <template #footer>
                                <van-button round size="mini" type="danger">立即抢</van-button>
                            </template>
                        </van-card>
                    </div>
                    </template>
                </van-tab>
            </van-tabs>
        </div>



    </div>
</template>

<script>
    import {getbigSaleGoods} from "@/api/api";
    import img from "@/api/api"
    import {Toast} from "vant";
    export default {
        name: "bigSaleDetail"
        ,
        data(){
          return{
              goodsInfo:[],
              imgsrc:img.src,
          }
        },
        methods: {
            onClickLeft() {
                this.$router.push({path:'/dashboard/home'})
            },
            buy(gid,aid){
                this.$router.push({
                    path: '/goodDetail',
                    query: {
                        goodId: gid,
                        aid:aid
                    }
                })
            },
    },
        created() {
            getbigSaleGoods().then((response) => {
                if(response.data.code===2000){
                    this.goodsInfo=response.data.data.goodList;
                }else{
                    Toast(response.data.message);
                }

            });
        },

    };
</script>

<style scoped>
.goodsdetail{
    width:95%;height:150px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 5px
}
#main-box{
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

</style>